<template>
  <div class="glass gap-col-8">
    <div class="swap gap-row-5" :class="{ 'is-left': isLeft, 'is-right': isRight }">
      <div
        class="label font-size-12 line-hight-140 font-weight-500"
        :class="{ 'active badge-pr': isLeft, 'left-active-label': isLeft }"
        @click="emitValue(leftValue)"
      >
        {{ leftLabel }}
        <span v-if="leftSubLabel" class="badge font-size-10 line-hight-120 font-weight-500">{{ leftSubLabel }}</span>
      </div>
      <div
        class="label font-size-12 line-hight-140 font-weight-500"
        :class="{ active: isRight, 'right-active-label': isRight }"
        @click="emitValue(rightValue)"
      >
        {{ rightLabel }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: Number,
    required: true,
  },
  leftValue: {
    type: Number,
    required: true,
  },
  rightValue: {
    type: Number,
    required: true,
  },
  leftLabel: {
    type: String,
    required: true,
  },
  rightLabel: {
    type: String,
    required: true,
  },
  leftSubLabel: {
    type: String,
    required: true,
  },
})

const isLeft = computed(() => props.modelValue === props.leftValue)
const isRight = computed(() => props.modelValue === props.rightValue)

const emit = defineEmits(['update:modelValue'])
const emitValue = (value) => {
  emit('update:modelValue', value)
}
</script>

<style scoped lang="scss">
.glass {
  display: flex;
  width: 100%;
  height: 2.25rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(24, 25, 37, 0.02);

  .swap {
    display: inline-flex;
    padding-left: 1rem;
    align-items: center;
    border-radius: 62.5rem;
    border: 0.0625rem solid #d7d7d7;
    height: 1.5rem;
  }

  .is-left {
    padding-left: 0;
    padding-right: 0.875rem;
  }

  .is-right {
    padding-left: 0.875rem;
    padding-right: 0;
  }

  .label {
    color: var(--color-primary-white, #fff);
    text-align: center;
    display: flex;
    align-items: center;
    font-family: 'PingFang SC';
    cursor: pointer;

    & .badge {
      margin-left: 0.5rem;
      padding: 0.125rem 0.5rem;
      background: rgb(var(--v-theme-primary));
      border-radius: 0.625rem;
    }
  }

  .active {
    display: flex;
    height: 1.5rem;
    padding: 0.3125rem 0.875rem;
    justify-content: center;
    align-items: center;
    border-radius: 62.5rem;
    color: var(--color-primary-gray, #3b3c46);
    border: 0.0625rem solid #d7d7d7;
    background: #181925;
    color: white;
    margin-left: -0.0625rem;
    margin-right: -0.0625rem;

    &.badge-pr {
      padding: 0.3125rem 0.375rem 0.3125rem 0.875rem !important;
    }

    & .badge {
      border: 0.0625rem solid rgb(var(--v-theme-primary));
    }
  }
}

.left-active-label {
  margin-right: 0.3125rem !important;
}
.right-active-label {
  margin-left: 0.3125rem !important;
}
</style>
